<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.tailwindcss.com" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto max-w-2xl px-4 py-8">
        <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">
            <i class="fas fa-tasks mr-2"></i>待办事项管理
        </h1>
        
        <!-- 搜索和添加区域 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex gap-4 mb-4">
                <input type="text" id="searchInput" placeholder="搜索待办事项..." 
                       class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <button id="addBtn" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">
                    <i class="fas fa-plus mr-1"></i>新增
                </button>
            </div>
            
            <div class="flex gap-4">
                <select id="filterStatus" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">全部状态</option>
                    <option value="false">未完成</option>
                    <option value="true">已完成</option>
                </select>
            </div>
        </div>
        
        <!-- 待办事项列表 -->
        <div id="todoList" class="space-y-4">
            <!-- 待办事项将在这里动态生成 -->
        </div>
        
        <!-- 空状态提示 -->
        <div id="emptyState" class="text-center py-12 hidden">
            <i class="fas fa-clipboard-list text-6xl text-gray-300 mb-4"></i>
            <p class="text-gray-500 text-lg">暂无待办事项</p>
        </div>
    </div>
    
    <!-- 添加/编辑模态框 -->
    <div id="modal" class="fixed inset-0 bg-black bg-opacity-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg p-6 w-full max-w-md">
                <h2 id="modalTitle" class="text-xl font-bold mb-4">添加待办事项</h2>
                <input type="text" id="todoInput" placeholder="请输入待办事项内容..." 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <div class="flex gap-2 justify-end">
                    <button id="cancelBtn" class="px-4 py-2 text-gray-600 hover:text-gray-800">取消</button>
                    <button id="saveBtn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="app.js"></script>
</body>
</html>
